<template>
  <div class="wapper">
    <el-container style="100%">
      <el-main style="background:#fff;">
        <div class="table-wrap" v-show="listShow">
          <div class="handle-box3">
            <el-form :inline="true" ref="form" :model="searchForm" class="demo-form-inline">
              <div class="uers-left">
                <el-form-item label="搜索：">
                  <el-input v-model="searchForm.name" placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item label>
                  <el-input v-model="searchForm.phone" placeholder="手机"></el-input>
                </el-form-item>
                <el-form-item label>
                  <el-input v-model="searchForm.booth" placeholder="展位"></el-input>
                </el-form-item>
                <el-form-item label="状态：">
                  <el-select v-model="searchForm.state" placeholder="选择状态">
                    <el-option
                      label="全部"
                      value="0">
                    </el-option>
                    <el-option
                      label="未审核"
                      value="1">
                    </el-option>
                    <el-option
                      label="已审核"
                      value="2">
                    </el-option>
                    <el-option
                      label="已拒绝"
                      value="3">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="searchSubmit()">搜索</el-button>
              </div>
              <div class="uers-right">
                <span class="btn-r" style="padding-left:10px">
                  <el-button type="primary" plain icon="el-icon-plus" @click="addSubmit">新增</el-button>
                </span>
                <el-popover placement="bottom" title="批量导入" width="220" trigger="click">
                  <div>
                    <el-upload
                      class="upload-demo"
                      :action="action"
                      :auto-upload="false"
                      :on-change="uploadChange"
                      accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                      >
                      <el-button size="small" type="primary">选择导入模板</el-button>
                    </el-upload>
                    <el-button type="success" @click="download" plain icon="el-icon-download" class="down-template">下载模板</el-button>
                  </div>
                  <p class="import-text">只能选择 .xls .xlsx 文件</p>
                  <div>
                    <el-button type="success" @click="importData">开始导入</el-button>
                  </div>
                  <el-button type="primary" plain icon="el-icon-upload2" slot="reference">导入证件</el-button>
                </el-popover>
              </div>
            </el-form>
          </div>
          <div class="tabbox">
          <el-table
            :data="dataList"
            height="100%"
            border
            class="tabbox"
            ref="multipleTable"
            :header-cell-style="{background:'#f2f6fc',color:'#606266'}"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="name" label="姓名" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="phone" label="手机" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.phone}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="position" label="职位" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.position}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="company" label="公司" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.company}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="booth" label="展位" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.booth}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="personal" label="参展人数" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.personal}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="state" label="审核状态" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.state==1?"未审核":(scope.row.state==2?'已审核':'已拒绝')}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                <el-button type="text" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table></div>
          <div class="fb"><el-pagination
            class="pag"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          ></el-pagination></div>
        </div>
        <DeleteDialog
          :delVisible="delVisible"
          @deleteData="deleteData"
          @handleCloseVisible="handleCloseVisible"
        ></DeleteDialog>
        <EditExhibition :editShow="editShow" :editData="editData" @backFunStu="getFunStu"></EditExhibition>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import EditExhibition from "../../../components/major/businessman/EditExhibition";
import DeleteDialog from "../../../components/public/DeleteConfim";

export default {
  data() {
    return {
      total: 0, //总条数
      currentPage: 1, //初始页
      pagesize: 10, // 每页的数据
      searchForm: {
        name: "",
        phone: "",
        booth:"",
        state:"0"
      },
      editData: {},
      listShow: true,
      editShow: false,
      delVisible: false,
      action:localStorage.getItem('url')+'/Upload/File',
      dataList: [],
      multipleSelection: [],
      projectId: localStorage.getItem("project_Id"),
      exhibitor_Id: ""
    };
  },
  mounted() {
    // this.tabheight=(this.$refs.getheight.offsetHeight-165)
  },
  created() {
    this.getData();
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
      this.searchSubmit();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.searchSubmit();
    },
    addSubmit() {
      this.listShow = false;
      this.editShow = true;
    },
    searchSubmit() {
      var search = {
        name: this.searchForm.name,
        pageIndex: this.currentPage - 1,
        pageSize: this.pagesize,
        phone: this.searchForm.phone,
        projectId: this.projectId,
        booth:this.searchForm.booth,
        state:this.searchForm.state
      };
      this.$axios.post("/Exhibitor/Search",search).then(res => {
        if (res.data.hasError == false) {
          this.dataList = [...res.data.data];
          this.total = res.data.total;;
        }
      });
    },
    handleDelete(index, row) {
      this.exhibitor_Id = row.exhibitorId;
      this.delVisible = true;
    },
    handleCloseVisible() {
      this.exhibitor_Id = "";
      this.delVisible = false;
    },
    deleteData() {
      this.$axios.delete(`/Exhibitor/${this.exhibitor_Id}`).then(res => {
          this.$message.success("删除成功！");
          this.delVisible = false;
          this.getData();
      });
    },
    // 获取数据
    getData() {
      this.currentPage=1;
      this.searchSubmit();
    },
    uploadChange(file, fileList){
      let inputDOM = this.$refs.inputer; // 通过DOM取文件数据

      this.file = event.currentTarget.files[0];
      var rABS = false; //是否将文件读取为二进制字符串
      var f = this.file;

      var reader = new FileReader(); //if (!FileReader.prototype.readAsBinaryString) {
      FileReader.prototype.readAsBinaryString = function(f) {
        var binary = "";
        var rABS = false; //是否将文件读取为二进制字符串
        var pt = this;
        var wb; //读取完成的数据
        var outdata;
        var reader = new FileReader();
        reader.onload = function(e) {
          var bytes = new Uint8Array(reader.result);
          var length = bytes.byteLength;
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          var XLSX = require("xlsx");
          if (rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), {
              //手动转化
              type: "base64"
            });
          } else {
            wb = XLSX.read(binary, {
              type: "binary"
            });
          } // outdata就是你想要的东西 excel导入的数据
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); // excel 数据再处理
          let ar=[];
          outdata.map(v => {
            let obj = {};
            obj.name = v.姓名;
            obj.phone = v.手机;
            obj.position = v.职位;
            obj.company = v.公司;
            obj.booth = v.展位;
            obj.personal = v.参展人数;
            obj.state = v.审核状态=="已审核"?1:0;
            obj.remark = v.公司和展品描述;
            ar.push(obj);
          });
            localStorage.setItem('attr',JSON.stringify(ar))
          };
        reader.readAsArrayBuffer(f);
      };
      if (rABS) {
        reader.readAsArrayBuffer(f);
      } else {
        reader.readAsBinaryString(f);
      }
    },
    importData(){ 
      this.attr=  JSON.parse(localStorage.getItem('attr'))
      if(this.attr&&this.attr.length>0){            
        const loading =this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });  
          this.$axios.put('/Exhibitor/AddList/'+this.projectId,this.attr)
            .then(res =>{
              if (res.data.hasError == false) {
                loading.close();
                this.$message.success(res.data.message);
                this.searchSubmit();
              }else{
                this.$message.error(res.data.message);
                loading.close();
              }
            }).catch(function(){
              loading.close();
            })
        }else{
          this.$message.error("没有可上传的数据");
        }
    },
    download(){
      window.open(localStorage.getItem('url').replace('/api','/')+'/upload/展商模板.xlsx')
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      this.editData = row;
      this.listShow = false;
      this.editShow = true;
    },
    getFunStu() {
      this.listShow = true;
      this.editShow = false;
      this.getData();
    }
  },
  components: {
    EditExhibition,
    DeleteDialog
  }
};
</script>
<style lang="scss" scope>
.pag {
  position: absolute;
  bottom: 0;
}
.table-wrap {
  height: 100%;
  margin-left: 10px;
}
.el-main{
  border-radius: 5px;
  position: relative;
}
.uers-left {
  float: left;
}
.uers-right {
  float: right;
  margin-bottom: 20px;
}
  .btn-r{
    margin-right: 20px;
  }
.file-up {
  width: 100px;
  position: absolute;
  height: 32px;
  opacity: 0;
}
.import-text {
  margin: 15px 0;
}
.el-upload--text{
  width: 110px;
  height: 32px;
  line-height: 32px;
  border: 0;
}
.down-template{
  position: absolute;
  top: 40px;
  right: 10px;
}
.el-dialog{height: auto;}
</style>